<template>
  <div class="he">
    <div class="app-container">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="来访人员:">
          <el-input v-model="form.visitorInfoList.visitorName"></el-input>
        </el-form-item>

        <el-form-item label="来访部门:">
          <el-input v-model="form.visitorInfoList.visitDept"></el-input>
        </el-form-item>

        <el-form-item label="来访时间:">
          <el-input v-model="form.visitorInfoList.visitEndTime"></el-input>
        </el-form-item>

        <el-button type="primary" size="small" icon="el-icon-search"
          >搜索</el-button
        >
        <el-button size="small" icon="el-icon-refresh" @click="reset"
          >重置</el-button
        >
      </el-form>
    </div>
    <div class="zeng">
      <el-row class="mb8">
        <el-button size="small" type="primary" @click="add"
          >新增来访申请</el-button
        >
      </el-row>
    </div>
    <div class="foot">
      <template>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="applyNo" label="编号">
            <template slot-scope="scope">
              <div
                style="
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
              >
                {{ scope.row.applyNo }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="pageNum" label="来访人员"></el-table-column>
          <el-table-column prop="visitDept" label="来访部门"></el-table-column>
          <el-table-column
            prop="applyStatus"
            label="是否健康检查"
          ></el-table-column>
          <el-table-column prop="visitBeginTime" label="来访时间">
            <template slot-scope="scope">
              <div
                style="
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
              >
                {{ scope.row.visitBeginTime }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="visitBeginTime" label="申请时间">
            <template slot-scope="scope">
              <div
                style="
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
              >
                {{ scope.row.visitBeginTime }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >查看</el-button
              >
              <el-button type="text" size="small">编辑</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div>
      <el-pagination
        class="page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </div>

    <template class="center">
      <!--  <el-dialog title="另存为" :visible.sync="dialogVisible" :before-close="handleClose" custom-class="saveAsDialog">`
 -->
      <el-dialog
        custom-class="saveAsDialog"
        class="addNew"
        title="新增来访申请"
        :visible.sync="dialogFormVisible"
      >
        <el-form
          :model="form"
          ref="form"
          label-width="127px"
          :rules="rules"
          :inline="true"
        >
          <el-row>
            <el-col :span="12"
              ><el-form-item label="来访部门:" prop="visitDept">
                <el-input
                  v-model="form.visitDept"
                  style="width: 220px"
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="12"
              ><el-form-item label="访问区域:">
                <el-input
                  v-model="form.visitRegion"
                  style="width: 220px"
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="24"
              ><el-form-item label="活动时间">
                <el-col :span="11">
                  <el-date-picker
                    v-model="form.visitBeginTime"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择日期时间"
                    align="right"
                  >
                  </el-date-picker>
                </el-col> </el-form-item
            ></el-col>
            <el-col :span="24"
              ><el-form-item label="来访原因:" prop="visitReason">
                <el-input
                  style="width: 580px"
                  type="textarea"
                  v-model="form.visitReason"
                ></el-input> </el-form-item
            ></el-col>
            <el-col
              ><el-form-item label="是否要健康检查:" label-width="127px">
                <el-radio-group v-model="radio" @change="del">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item></el-col
            >
          </el-row>

          <div v-for="(item, index) in form.visitorInfoList" :key="index">
            <el-row>
              <el-col :span="7">
                <el-form-item
                  label="来访人员:"
                  :prop="'visitorInfoList.' + index + '.visitorName'"
                  :rules="{
                    required: true,
                    message: '姓名不能为空', 
                    trigger: 'blur',
                  }"
                >
                  <el-input
                    v-model="item.visitorName"
                    style="width: 180px"
                  ></el-input></el-form-item
              ></el-col>
              <el-col :span="7"
                ><el-form-item
                  label="人员身份证号:"
                  :prop="'visitorInfoList.' + index + '.visitorNo'"
                  :rules="[
                    {
                      required: true,
                      message: '请填写18位身份证号码',
                      trigger: 'blur',
                    },
                    {
                      pattern:
                        /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
                      message: '证件号码格式有误！',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input
                    v-model="item.visitorNo"
                    style="width: 180px"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="7"
                ><el-form-item
                  label="上传完成图片:"
                  :prop="'visitorInfoList.' + index + '.fileList'"
                  v-show="radio"
                  :rules="[
                    {
                      required: true,
                      message: '上传图片',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-upload
                    :action="updataUrl"
                    list-type="picture-card"
                    :file-list="item.fileList"
                    :on-success="handleSuccess"
                    :on-error="handleError"
                  >
                    <i class="el-icon-plus"></i> </el-upload></el-form-item
              ></el-col>
              <el-col :span="3">
                <el-form-item>
                  <el-button
                    v-if="index + 1 == form.visitorInfoList.length"
                    @click="addItem"
                    size="mini"
                    type="primary"
                    >增加</el-button
                  >
                  <el-button
                    v-if="index !== 0"
                    @click="deleItem(item, index)"
                    size="mini"
                    type="primary"
                    >删除</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">关 闭</el-button>
          <el-button type="primary" @click="submitForm()"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </template>
  </div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getVisitorList, getApplicationSubmission } from "@/api/workflow/visit";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    var checkImage = (rule, value, callback) => {
      if (value.length < 1) {
        callback(new Error("图片不能为空！"));
      } else {
        callback();
      }
    };
    // 这里存放数据

    return {
      healthChecks: false,
      radio: true,
      dialogVisible: false,
      currentPage4: 4,
      dialogFormVisible: false,
      // updataUrl: "http://localhost:10004/dev-api/test/uploadImage",
      updataUrl: process.env.VUE_APP_BASE_API + "/test/uploadImage",
      form: {
        visitorInfoList: [
          {
            visitorName: "", //人员姓名
            visitorNo: "", //身份号
            healthCodeImage: "",//上传的图片地址
            fileList: []//保存的准备上传的图片
            // visitorName: "", //人员姓名
            // visitorNo: "", //身份号
            // healthCodeImage: "",
          },
        ],
        visitDept: "", //来访部门
        visitReason: "", //来访原因
        visitRegion: "", //来访区域
        // visitEndTime: "", //来访时间
        visitBeginTime: "", // 申请时间
        // isHealthCode: "",
        // applyStatus: "",
        
      },
      listVisti: {
        pageSize: 10,
        pageNum: 1,
      },
      rules: {
        //来访部门非空
        visitDept: [
          {
            required: true,
            message: "请选择来访部门！",
            trigger: "change",
          },
        ],
        //图片非空验证
        // fileList: [
        //   {
        //     required: true,
        //     validator: checkImage,
        //     trigger: "change",
        //   },
        // ],
        // 来访原因非空
        visitReason: [
          {
            required: true,
            message: "请输入来访原因！",
            trigger: "change",
          },
        ],
        // customerIdCard: [
        //   {
        //     required: true,
        //     message: "请填写18位身份证号码",
        //     trigger: "blur",
        //   },
        //   {
        //     pattern:
        //       /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
        //     message: "证件号码格式有误！",
        //     trigger: "blur",
        //   },
        // ],
      },
      formLabelWidth: "120px",
      tableData: [],
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合 42432
  methods: {
    //添加新增来访人员输入框
    addItem() {
      this.form.visitorInfoList.push({
        visitorName: "",
        visitorNo: "",
        healthCodeImage: "",
        fileList:[]
      });
    },

    sure(form) {
      console.log(this.form.visitorInfoList.ldngth, "length");
      this.$refs[form].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!");
          return false;
        }
      });
    },
    //新增人员输入框删除
    deleItem(item, index) {
      this.form.visitorInfoList.splice(index, 1);
      console.log(this.form.visitorInfoList, "删除");
    },
    //页面初始化查询来访数据
    getvisit() {
      getVisitorList(this.listVisti).then((res) => {
        console.log(res, "来访数据");
        this.tableData = res.data.list;
        console.log(this.tableData, "数据");
      });
    },
    //选择健康检查清空上传图片
    del() {
      this.form.visitorInfoList.fileList = [];
    },
    //打开新增申请弹框时清空弹框数据
    add() {
      for(var i = 0; i < this.form.visitorInfoList.length;i++){
        this.form.visitorInfoList[i].visitorName = ""//人员姓名
        this.form.visitorInfoList[i].visitorNo = ""//身份号
        this.form.visitorInfoList[i].healthCodeImage = ""//健康图片
      };
     
        (this.form.visitDept = ""),//来访部门
        (this.form.visitReason = ""),//来访原因
        (this.form.visitRegion = ""),//来访区域
        (this.form.visitBeginTime = ""),//申请时间
      this.form.visitorInfoList.fileList = [];
      this.dialogFormVisible = true;
      // this.$nextTick(() => {
      //   this.$refs["form"].clearValidate();
      // });
    },
    //上传失败
    handleError() {},
    //上传成功的钩子
    handleSuccess(resp, file, filelist) {
      if (!this.form.visitorInfoList.fileList) {
        this.form.visitorInfoList.fileList = [];
      }
      this.form.visitorInfoList.fileList.push(file);
      this.$refs["form"].clearValidate("fileList"); //清空校验红字提示
      return true;
    },
    //清空搜索框搜索条件
    reset() {
      this.form.visitorInfoList.visitorName = "";
      this.form.visitorInfoList.visitDept = "";
      this.form.visitorInfoList.visitEndTime = "";
    },

    handleClick(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //提交来访申请
    submitForm() {
      console.log(this.form.visitorInfoList.fileList,"图片")
      this.form.visitorInfoList.healthCodeImage = '' 
      for(var i = 0; i < this.form.visitorInfoList.length; i++){
        console.log(1)
        for(var j = 0; j < this.form.visitorInfoList.fileList.length;j++){
          console.log(2)
          console.log(this.form.visitorInfoList.fileList[j].response.result,"打印")
          this.form.visitorInfoList[i].healthCodeImage += this.form.visitorInfoList.fileList[j].response.result
          this.form.visitorInfoList[i].healthCodeImage += ","
          console.log(this.form.visitorInfoList.healthCodeImage,"上传的图片")
        }
      }
       getApplicationSubmission(this.form).then(res=>{
            console.log(res)
            if(res.code == 200){
                this.dialogFormVisible = true 
            }
          })
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     alert("提交成功！!");
      //     //提交来访申请
      //   } else {
      //     console.log("error 提交失败！!!");
      //     console.log("提交失败！");
      //     return false;
      //   }
      // });
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getvisit();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
// @import url(); 引入公共css类
.he {
  width: 100%;
}
.app-container {
  width: 100%;
  margin: 0 auto;
}
.app-container .el-form-item {
  float: left;
}

.app-container .el-button {
  margin-left: 1.5%;
}

.zeng {
  width: 97%;
  margin: 0 auto;
}

.mb8 {
  margin-top: 20px;
}
.foot {
  width: 97%;
  margin: 0 auto;
}
.page {
  float: right;
}
.line {
  text-align: center;
}
/deep/ .saveAsDialog {
  width: 80% !important;
}
/deep/ .el-upload--picture-card {
  width: 50px;
  height: 50px;
  line-height: 55px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item {
  width: 50px;
  height: 50px;
  line-height: 55px;
}
</style>

